<template>
    <div class="export-database-table-box">
        <el-dialog title="导入数据库表相关信息" :model-value="GeneratorExportDatabaseTableDialogVisible"
            @input:model-value="updateDialogVisible" align-center width="60%" style="height: 680px;"
            :before-close="onCancel" body-class="export-database-table-body">
            <div class="export-database-table">
                <el-card>
                    <el-form :inline="true" :model="searchTableBaseData" class="search-form">
                        <el-form-item label="表名">
                            <el-input v-model="searchTableBaseData.tableName" placeholder="请输入表名" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="searchBaseTableData">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

                <el-table ref="tableBaseDataRef" :data="tableBaseData" :stripe="true" :border="true"
                    :highlight-current-row="true" max-height="500px" style="width: 100%;"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50" align="center" />
                    <el-table-column prop="tableName" label="表名"></el-table-column>
                    <el-table-column prop="tableDescribe" label="表描述"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column prop="updateTime" label="修改时间"></el-table-column>
                </el-table>
                <div class="table-pagination">
                    <el-pagination v-model:current-page="searchTableBaseData.pageNum"
                        v-model:page-size="searchTableBaseData.pageSize" :page-sizes="[10, 20, 30, 50]" background
                        layout="total, sizes, prev, pager, next, jumper" :page-count="pageCount" :total="total"
                        @change="searchBaseTableData" small />
                </div>
            </div>
            <template #footer>
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="onCancel">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
// ---------------------------------------------------导入相关引用---------------------------------------------------
import { ref, reactive, watch } from 'vue';
import { getDatabaseTables, exportDatabaseTables, type SearchTableBaseData } from '@/api/generator/generator'
import { ElMessage } from 'element-plus'

// ---------------------------------------------------相关参数定义---------------------------------------------------
const props = defineProps({
    GeneratorExportDatabaseTableDialogVisible: {
        type: Boolean,
        default: false
    }
})

const searchTableBaseData = reactive<SearchTableBaseData>({
    pageNum: 1,
    pageSize: 10,
    tableName: ''
});

const tableBaseDataRef = ref();
const tableBaseData = ref<TableBaseData[]>([]);
const pageCount = ref(0);
const total = ref(0);
const selectionTableBaseDataList = ref<string[]>([]);
// ---------------------------------------------------事件定义---------------------------------------------------
const emit = defineEmits(['update:GeneratorExportDatabaseTableDialogVisible', 'onParentSearch']);
// ---------------------------------------------------操作方法定义---------------------------------------------------
watch(() => props.GeneratorExportDatabaseTableDialogVisible, (newValue, oldValue) => {
    if (newValue) {
        searchBaseTableData();
    }
})

/**
 * 查询数据库表信息
 * @returns void
 */
const searchBaseTableData = () => {
    getDatabaseTables(searchTableBaseData).then((res) => {
        if (res.data.code === 200) {
            tableBaseData.value = res.data.data.records;
            pageCount.value = res.data.data.pages;
            total.value = res.data.data.total;
        }
    })
}

/**
 * 选择要导入的表信息
 * @param val 选中的表信息
 * @returns void
 */
const handleSelectionChange = (val: TableBaseData[]) => {
    selectionTableBaseDataList.value = val.map((item) => {
        return item.tableName;
    })
}

/**
 * 提交表单
 * @returns void
 */
const onSubmit = () => {
    exportDatabaseTables(selectionTableBaseDataList.value).then((res) => {
        if (res.data.code === 200) {
            ElMessage.success('导入成功');
            onCancel();
        }
    })

}

/**
 * 重置表单
 * @returns void
 */
const onCancel = () => {
    selectionTableBaseDataList.value = [];
    tableBaseDataRef.value.clearSelection();
    emit('update:GeneratorExportDatabaseTableDialogVisible', false);
    emit('onParentSearch');
}

/**
 * 更新对话框显示状态
 * @param visible 对话框显示状态
 * @returns void
 */
const updateDialogVisible = (visible: boolean) => {
    emit('update:GeneratorExportDatabaseTableDialogVisible', visible);
}

// ---------------------------------------------------实体定义区---------------------------------------------------
interface TableBaseData {
    tableName: string;
    tableDescribe: string;
    createTime: string;
    updateTime: string;
}

</script>

<style lang="scss" scoped>
.export-database-table-box {
    width: 100%;

    .export-database-table {
        width: 100%;
        height: 550px;

        .table-pagination {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
        }
    }
}
</style>